<?php if (!defined('THINK_PATH')) exit(); /*a:4:{s:92:"D:\phpstudy_pro\WWW\gaswww\gasStore\public/../application/admin\view\quickly\cash\index.html";i:1677032508;s:78:"D:\phpstudy_pro\WWW\gaswww\gasStore\application\admin\view\layout\default.html";i:1676882286;s:75:"D:\phpstudy_pro\WWW\gaswww\gasStore\application\admin\view\common\meta.html";i:1676882286;s:77:"D:\phpstudy_pro\WWW\gaswww\gasStore\application\admin\view\common\script.html";i:1676882286;}*/ ?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
<title><?php echo (isset($title) && ($title !== '')?$title:''); ?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta name="referrer" content="never">
<meta name="robots" content="noindex, nofollow">

<link rel="shortcut icon" href="/assets/img/favicon.ico" />
<!-- Loading Bootstrap -->
<link href="/assets/css/backend<?php echo \think\Config::get('app_debug')?'':'.min'; ?>.css?v=<?php echo \think\Config::get('site.version'); ?>" rel="stylesheet">

<?php if(\think\Config::get('fastadmin.adminskin')): ?>
<link href="/assets/css/skins/<?php echo \think\Config::get('fastadmin.adminskin'); ?>.css?v=<?php echo \think\Config::get('site.version'); ?>" rel="stylesheet">
<?php endif; ?>

<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
  <script src="/assets/js/html5shiv.js"></script>
  <script src="/assets/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript">
    var require = {
        config:  <?php echo json_encode($config); ?>
    };
</script>

    </head>

    <body class="inside-header inside-aside <?php echo defined('IS_DIALOG') && IS_DIALOG ? 'is-dialog' : ''; ?>">
        <div id="main" role="main">
            <div class="tab-content tab-addtabs">
                <div id="content">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <section class="content-header hide">
                                <h1>
                                    <?php echo __('Dashboard'); ?>
                                    <small><?php echo __('Control panel'); ?></small>
                                </h1>
                            </section>
                            <?php if(!IS_DIALOG && !\think\Config::get('fastadmin.multiplenav') && \think\Config::get('fastadmin.breadcrumb')): ?>
                            <!-- RIBBON -->
                            <div id="ribbon">
                                <ol class="breadcrumb pull-left">
                                    <?php if($auth->check('dashboard')): ?>
                                    <li><a href="dashboard" class="addtabsit"><i class="fa fa-dashboard"></i> <?php echo __('Dashboard'); ?></a></li>
                                    <?php endif; ?>
                                </ol>
                                <ol class="breadcrumb pull-right">
                                    <?php foreach($breadcrumb as $vo): ?>
                                    <li><a href="javascript:;" data-url="<?php echo $vo['url']; ?>"><?php echo $vo['title']; ?></a></li>
                                    <?php endforeach; ?>
                                </ol>
                            </div>
                            <!-- END RIBBON -->
                            <?php endif; ?>
                            <div class="content">
                                <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="home">
				<div class="home-left">
					<div class="tabs">
						<div class="item" :class="{active:active==index}" v-for="(item,index) in tabs"
							@click="handleTabs(item,index)">{{item.name}}</div>
					</div>
					<div class="group scroll-bar">
						<div class="item" :class="{active:item.active}" v-for="(item,index) in oilNoList"
							@click="handleAmountOpen(item,index)">
							<div class="title">{{item.gas_name}}</div>
							<div class="amount" v-if="item.active">¥{{item.fuellingAmount|numFilter}}</div>
							<div class="name">{{item.name}}</div>
							<div class="under">
								<div class="icon"></div>
								<div class="price" v-if="item.active">{{item.fuellingVolume|numFilter}}L</div>
							</div>
							<div class="delete" @click.stop="handleAmountDelete(item)" v-if="item.active"></div>
						</div>
					</div>
					<div class="base">
						<div class="count-warp">
							<div class="left">
								加油订单 <div class="num">{{oilTotal}}</div>笔
							</div>
							<div class="right">
								油品总额 <div class="num">￥{{oilAmount|numFilter}}</div>
							</div>
						</div>
					</div>
					<div class="reset" @click="handleResetOil">重置</div>
				</div>
				<div class="home-center">
					<div class="goods-title">非油商品</div>
					<input class="goods-input" type="text" v-model="goodsName" placeholder="请输入商品名称、条码、商品关键词"
						@keydown.enter="handleGoods" />
					<!-- 悬浮选项 -->
					<div class="levitation-option" v-if="showLevitation">
						<div class="title" v-for="(item,index) in levitation" @click="handleLevitation(item)">
							<div class="name">{{item.goods_name}}</div>
							<div class="price">{{item.price}}</div>
						</div>
					</div>
					<!-- 悬浮选项 -->
					<div class="table">
						<div class="td-title">
							<div class="grey name">商品</div>
							<div class="grey unit-price">单价</div>
							<div class="grey quantity">数量</div>
							<div class="grey operation">操作</div>
						</div>
						<div class="list scroll-bar">
							<div class="item" v-for="(item,index) in goodsList">
								<div class="grey name">{{item.goods_name}}</div>
								<div class="grey">{{item.price}}</div>
								<div class="grey quantity">
									<div class="reduce" @click="handleReduceCar(item)">-</div>
									<div class="quantity-number" v-if="item.num">{{item.num}}</div>
									<div class="quantity-number" v-else>0</div>
									<div class="add" @click="handleAddCar(item)">+</div>
								</div>
								<div class="grey operation del" @click="handleDelCar(item)">
									<div class="icon">x</div>
								</div>
							</div>
						</div>
						<div class="base">
							<div class="count-warp">
								<div class="left">
									商品数量 <div class="num">{{goodTotal}}件</div>
								</div>
								<div class="right">
									商品总额 <div class="num">￥{{goodAmount|numFilter}}</div>
								</div>
							</div>
						</div>
						<div class="btns">
							<div class="left">
								<div class="clear">清空</div>
							</div>
							<div class="right">
								<div class="green">
									<div class="num" v-if="stationTotal>0">{{stationTotal}}</div>
									<div class="name" @click="handleLodge">取单</div>
								</div>
								<div class="blue" @click="insertstation">挂单</div>
							</div>
						
						</div>
					</div>
				</div>
				<div class="home-right">
					<div class="home-title">
						<div class="name" v-if="JSON.stringify(userInfo) !=='{}'">会员名称：{{userInfo.nickname}}</div>
						<div class="btn" @click="handleLoginOpen">会员登录</div>
					</div>
					<div class="group">
						<div class="goods">
							<div class="item">油品:￥{{oilAmount|numFilter}}</div>
							<div class="item">商品:￥{{goodAmount|numFilter}}</div>
							<div class="item">合计: ￥{{sumAmount|numFilter}}</div>
						</div>
						<div class="list">
							<div class="discount" v-if="fullDecrement > 0" @click="handleCouponOpen">
								<div class="label">满减活动</div>
								<div class="price">
									<div class="num">-￥{{fullDecrement}}</div>
									<div class="tips">满减</div>
								</div>
							</div>
							<div class="amount">
								<div class="label">{{payWayName}}</div>
								<div class="price">{{paymentAmount|numFilter}}</div>
							</div>
							<div class="amount">
								<div class="label">找零</div>
								<div class="price">0.00</div>
							</div>
						</div>
						<div class="payment-list">
							<div class="item" :class="{active:paymentActive==index}" v-for="(item,index) in payWayList"
								@click="handleSelectPayment(item,index)">
								<img class="logo" :src="'http://www.leyinshuke.com'+item.iconimage+'?t=001'" />
								<div class="name">{{item.name}}</div>
							</div>
						</div>
						<div class="below">
							<div class="left">
								<div class="price">
									<div class="rmb">¥</div>
									<div class="num">{{paymentAmount|numFilter}}</div>
								</div>
								<div class="tips">优惠合计: {{fullDecrement}}元</div>
							</div>
							<div class="right">
								<div class="submit" @click="handlePaymentOpen">结算</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 弹窗 -->
			<div class="popup-amount" v-if="showPopupAmount">
				<div class="title">加油金额</div>
				<div class="close" @click="handleAmountClose()">x</div>
				<div class="list">
					<div class="item">
						<div class="label">已选油品</div>
						<div class="num">{{popupAmountList.gas_name}}</div>
					</div>
					<div class="item">
						<div class="label">已选油枪</div>
						<div class="num">{{popupAmountList.name}}</div>
					</div>
					<div class="item">
						<div class="label">油品单价</div>
						<div class="num">{{popupAmountList.price}}{{popupAmountList.unit_type_text}}/L</div>
					</div>
					<div class="item grease">
						<input class="input" min="1" v-model="amountNum" type="number" @input="checkNum($event)"
							placeholder="请输入加油金额" />
						<!-- <select class="select" @change="handleCategory($event)">
							<option class="option" v-for="(item,index) in categoryList">{{item.name}}</option>
						</select> -->
						<div class="select">
							<div class="option" @click="handleCategoryOpen">{{categoryName}}</div>
							<div class="category" v-if="showCategory">
								<div class="option" v-for="(item,index) in categoryList" @click="handleCategory(item)">{{item.name}}</div>
							</div>
						</div>
					</div>
					<div class="item total-amount">
						<div class="ele" :class="{active:amountActive === index}" v-for="(item,index) in optionList"
							@click="handleOption(item,index)">{{item.name}}</div>
					</div>
					<div class="item btns">
						<div class="clear" @click="handleAmountClose">取消</div>
						<div class="sure" @click="handleAmountSure">确定</div>
					</div>
				</div>
			</div>
			<!-- 弹窗 -->
			<!-- 优惠券 -->
			<div class="popup-amount" v-if="showPopupCoupon">
				<div class="title">优惠券</div>
				<div class="close" @click="handleCouponClose()">x</div>
				<div class="list">
					<div class="coupon">
						<div class="item" v-for="(item,index) in couponList" :class="{active:couponActive===index}"
							@click="handleSlectCoupon(item,index)">
							<div class="label">{{item.name}}</div>
							<div class="num">{{item.amount}}</div>
						</div>
					</div>
					<div class="item btns">
						<div class="clear" @click="handleCouponClose">取消</div>
						<div class="sure" @click="handleCouponSure">确定</div>
					</div>
				</div>
			</div>
			<!-- 优惠券 -->
			<!-- 会员登录 -->
			<div class="popup-amount" v-if="showPopupLogin">
				<div class="title">会员登录</div>
				<div class="close" @click="handleLoginClose()">x</div>
				<div class="list">
					<div class="item grease">
						<input class="input" maxlength="11" v-model="mobile" type="text"
							placeholder="请输入手机号" />
					</div>
					<div class="item btns">
						<div class="clear" @click="handleLoginClose">取消</div>
						<div class="sure" @click="handleLoginSure">登录</div>
					</div>
				</div>
			</div>
			<!-- 会员登录 -->
			<!-- 挂单列表 -->
			<div class="popup-amount max-popup" v-if="showPopupLodge">
				<div class="title">挂单列表</div>
				<div class="close" @click="handleLodgeClose()">x</div>
				<div class="content">
					<div class="menu">
						<div class="name label">挂单分类</div>
						<div class="name" :class="{active:menuActive==index}" v-for="(item,index) in lodgeMenu" @click="handelMenu(item,index)">{{item}}</div>
					</div>
					<div class="group">
						<div class="group-title">
							<div class="name">商品名称</div>
							<div class="name">零售价</div>
							<div class="name">数量</div>
							<div class="name">金额</div>
						</div>
						<div class="element" v-for="(item,index) in lodgeList">
							<div class="ele" v-for="(ele,index) in item.goods">
								<div class="name">{{ele.name}}</div>
								<div class="name">{{ele.price}}</div>
								<div class="name">{{ele.num}}</div>
								<div class="name">{{(parseFloat(ele.price)*ele.num)|numFilter}}</div>
							</div>
						</div>
					</div>
				</div>
				<div class="list">
					<div class="item btns">
						<div class="clear" @click="handleLodgeDelete">作废</div>
						<div class="sure" @click="handleLodgeSure">取单</div>
					</div>
				</div>
			</div>
			<!-- 挂单列表 -->
			<!-- 支付弹窗 -->
			<div class="popup-amount" v-if="showPopupPayment">
				<div class="title">{{payWayName}}</div>
				<div class="close" @click="handlePaymentClose()">x</div>
				<div class="list">
					<div class="item grease">
						<input class="input" v-model="authcode" type="text"
							placeholder="扫描或输入付款码、支持微信、支付宝、云闪付" />
					</div>
					<div class="item btns">
						<div class="clear" @click="handlePaymentClose">取消</div>
						<div class="sure" @click="handlePaymentSure">确认支付</div>
					</div>
				</div>
			</div>
			<!-- 支付弹窗 -->
			<!-- 待支付弹窗 -->
			<div class="popup-payment" v-if="showPopupPay">
				<div class="title">{{toast}}</div>
				<div class="cancel" @click="handleCancelPayment">取消支付</div>
			</div>
			<!-- 待支付弹窗 -->
			<!-- 支付成功弹窗 -->
			<div class="popup-payment" v-if="showSuccess">
				<div class="title">支付成功</div>
				<div class="cancel" @click="handleCancelSuccess">确认</div>
			</div>
			<!-- 支付成功弹窗 -->
			<!-- 遮罩层 -->
			<div class="layer" v-if="layer"></div>
			<!-- 遮罩层 -->
			<!-- toast -->
			<div class="toast" v-if="showToast">{{toast}}</div>
			<!-- toast -->
		</div>

		<script>
			new Vue({
				el: '#app',
				data: {
					sumAmount:0,//合计金额
					paymentAmount:0,//支付金额
					showSuccess:false,
					paymentTimes:null,
					showPopupPayment:false,//支付状态
					showPopupPay:false,//支付弹窗状态
					menuActive:0,//挂单列表active
					lodgeMenu:[],//挂单菜单
					showPopupLodge:false,
					mobile:'',//手机号
					goodTotal: 0, //商品数量
					goodAmount: 0, //商品总额
					showLevitation: false,
					levitation: [], //悬浮选项
					showToast: false,
					toast: '', //弹窗信息
					couponList: [{
							name: "加油满20减",
							amount: '-2'
						},
						{
							name: "加油满50减",
							amount: '-5'
						},
						{
							name: "加油满100减",
							amount: '-10'
						}
					],
					couponActive: '',
					showPopupCoupon: false,
					amountNum: '', //加油金额
					layer: false,
					showPopupAmount: false,
					amountActive: '',
					amountList: [{
							name: '¥100',
							id: 1,
							type: '1',
							value: 100
						},
						{
							name: '¥150',
							id: 2,
							type: '1',
							value: 150
						},
						{
							name: '¥200',
							id: 3,
							type: '1',
							value: 200
						}, {
							name: '¥300',
							id: 4,
							type: '1',
							value: 300
						}
					],
					capacityList: [{
							name: '100L',
							id: 1,
							type: '2',
							value: 100
						},
						{
							name: '150L',
							id: 2,
							type: '2',
							value: 150
						},
						{
							name: '200L',
							id: 3,
							type: '2',
							value: 200
						},
						{
							name: '300L',
							id: 4,
							type: '2',
							value: 300
						}
					],
					optionList: [],
					active: 0,
					tabs: [],
					oilNoList: [],
					storageOilNoList: [],
					paymentActive: 0,
					payWayList: [],
					payWayName:'',
					categoryList: [{
							name: '元',
							id: '1'
						},
						{
							name: 'L',
							id: '2'
						},
					],
					categoryName:'元',//
					goodsName: '', //商品名称
					goodsList: [], //商品列表
					popupAmountList: [], //弹窗数据
					fuellingAmount: 0, //加油金额
					fuellingVolume: 0, //加油容量
					staId:'',//挂单id
					stationTotal:0,//挂单数量
					lodgeList:[],//挂单列表
					historyLodgeList:[],//挂单列表缓存
					oilAmount:0,//油总金额
					oilTotal:0,//油总数量
					showPopupLogin:false,//会员登录状态
					userInfo:{},//用户信息
					payType:'',//付款方式
					authcode:'',//付款码
					categoryName:'元',//
					showCategory:false,
					showDisabled:true,//控制结算
					gasId:'',//油号id
					gasGunId:'',//油枪id
					isLogin:false,//登录状态
					fullDecrement:0,//满减金额
					userId:'',//用户ID
				},
				mounted() {
					console.log("挂载完成生命周期");
					this.getoil() // 油枪接口
					this.getPay() // 支付类型
					this.getcartlist() // 获取购物车
					this.stationlist() // 挂单列表
					this.optionList = this.amountList	
				},
				filters: {
					numFilter(num) {
						return Math.round(num * 100) / 100
					}
				},
				watch: {
					// 监听商品
					goodsList(newValue, oldValue) {
						console.log(newValue, 'newValue')
						this.updateGoodsList(newValue)
					},
					oilNoList(newValue, oldValue) {
						console.log(newValue, 'newValue')
						this.updateOilNoList(newValue)
					},
				},
				methods: {
					/* 数据请求 */
					// 获取优惠
					queryDiscount(){
						if(this.isLogin){
							this.$http.post('../../ajax/getDiscount', {
								user_id: this.userId,
								gasamount:this.oilAmount,
								goodsamount:this.goodAmount,
								gas_id:this.gasId
							}, {
								emulateJSON: true
							}).then(function(res) {
								const code = res.data.code
								if (code == 1) {
									this.fullDecrement = parseFloat(res.data.data.discount_price)
									this.calculation()
								}
							}, function(res) {
								console.log(res.status);
							});
						}else{
							this.calculation()
						}
					},
					// 收银台结算
					queryPayment(){
						if(this.showDisabled){
							if(this.payType == 'cash'){
								this.authcode = ''
							}
							this.showDisabled = false // 禁止点击
							this.$http.post('../../ajax/manch_scan', {
								user_id: this.userId,
								sta_id: this.staId,
								amount:this.paymentAmount,
								gasamount:this.oilAmount,
								goodsamount:this.goodAmount,
								payType:this.payType,
								authcode:this.authcode,
								gas_id:this.gasId,
								gas_gun_id:this.gasGunId
							}, {
								emulateJSON: true
							}).then(function(res) {
								const code = res.data.code
								this.showDisabled = true // 开启点击
								if (code == 1) {
									let data = res.data.data
									switch(this.payType){
										case'cash':
											if(data.sub_code =='SUCCESS'){
												this.paymentAmount = 0
												this.sumAmount = 0
												this.fullDecrement = 0
												this.goodAmount = 0
												this.oilAmount = 0
												this.goodsList = []
												this.goodTotal = 0
												this.authcode = ''
												this.amountNum = ''
												this.amountActive = ''
												this.handleResetOil() // 重置油表数据
												this.showSuccess = true
												this.layer = true
											}
										break;
										case'marchant_scan':
										case'pos':
											const status = data.sub_code
											switch(status){
												case 'WECHAT':
												case 'WAITING_PAYMENT':
													this.toast = '等待支付中！'
													this.showPopupPay = true
													this.layer = true
													this.paymentTimes = setInterval(() => {
														this.$http.post('../../ajax/search_order', {
															 out_order_no: data.out_order_no
														}, {
															emulateJSON: true
														}).then(function(res) {
															const code = res.data.code
														 if (code == 1) {
																let data = res.data.data
																if(data.sub_code =='SUCCESS'){
																	this.paymentAmount = 0
																	this.sumAmount = 0
																	this.fullDecrement = 0
																	this.goodAmount = 0
																	this.oilAmount = 0
																	this.goodsList = []
																	this.goodTotal = 0
																	this.authcode = ''
																	this.goodsName = ''
																	this.amountNum = ''
																	this.amountActive = ''
																	this.handleResetOil() // 重置油表数据
																	this.toast = '支付成功!'
																	this.showPopupPay = false
																	this.showToast = true
																	clearInterval(this.paymentTimes)
																	let times1 = setTimeout(() => {
																		this.showToast = false
																		this.layer = false
																		clearTimeout(times1)
																	}, 2000)
																}
															}
														}, function(res) {
														 console.log(res.status);
														});
													}, 3000)
												break;
												case 'SUCCESS':
													this.toast = '支付成功!'
													this.layer = true
													this.showToast = true
													this.paymentAmount = 0
													this.sumAmount = 0
													this.fullDecrement = 0
													this.goodAmount = 0
													this.oilAmount = 0
													this.goodsList = []
													this.goodTotal = 0
													this.authcode = ''
													this.amountNum = ''
													this.amountActive = ''
													this.handleResetOil() // 重置油表数据
													let times1 = setTimeout(() => {
														this.showToast = false
														this.layer = false
														clearTimeout(times1)
													}, 2000)
												break;
											}
											
										break;
									}
								}else{
									const msg = res.data.msg
									this.toast = msg
									this.showToast = true
									this.layer = true
									let times = setTimeout(() => {
										this.showToast = false
										this.layer = false
										this.authcode = ''
										clearTimeout(times)
									}, 2000)
								}
							}, function(res) {
								console.log(res.status);
							});
						}
					},
					// 挂单接口
					insertstation(){
						this.$http.post('../../ajax/insertstation', {
							sta_id: this.staId
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
							if (code == 1) {
								this.stationlist()
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 挂单列表
					stationlist(){
						this.$http.post('../../ajax/stationlist', {},
						{
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
							if (code == 1) {
								let data = res.data.data
								this.lodgeMenu = []
								this.lodgeList = []
								if(JSON.stringify(data) !== '[]'){
									data.forEach(item=>{
										this.lodgeMenu.push(item.id) 
									})
									this.historyLodgeList = data
									this.lodgeList.push(data[0]) //TODO
									this.staId = data[0].id
									this.menuActive = 0
									console.log(data[0],'data')
									this.stationTotal = data.length
								}
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 油枪接口
					getoil() {
						this.$http.post('../../ajax/getoil',
								JSON.stringify({}), {
									headers: {
										'Content-Type': 'application/json;charset=UTF-8'
									}
								})
							.then(function(res) {
								const code = res.data.code
								if (code == 1) {
									let data = res.data.data
									let tabs = [{
										'name': '全部',
										id: 0
									}]
									let list = []
									data.forEach(item => {
										let obj = {
											name: item.gas_name,
											id: item.id
										}
										item.gun.forEach(element => {
											element.gas_name = item.gas_name
											element.market_price = item.market_price
											element.price = item.price
											element.unit_type_text = item.unit_type_text
											element.subscriptId = item.id
											list.push(element)
										})
										tabs.push(obj)
									})
									console.log(tabs, 'tabs')
									console.log(list, 'list')
									this.tabs = tabs
									this.oilNoList = list
									this.storageOilNoList = list
								}
							});

					},
					// 购物车操作
					setCart(id, type, sta_id) {
						this.$http.post('../../ajax/insertcart', {
							goods_id: id,
							num: 1,
							type: type,
							sta_id: sta_id
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
							if (code == 1) {
								let data = res.data.data
								this.updateGoodsList(this.goodsList)
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 获取购物车
					getcartlist() {
						this.$http.post('../../ajax/getcartlist', {
							sta_id: ""
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
							if (code == 1) {
								let data = res.data.data
								this.goodsList = data
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 查询商品接口
					getGoodsList() {
						this.$http.post('../../ajax/goodslist', {
							name: this.goodsName
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
						 if (code == 1) {
								let data = res.data.data
								if (JSON.stringify(data) !== '[]') {
									if(data.length == 1){
										let item = data[0]
										this.$set(item, 'num', 0)
										this.showLevitation = false
										this.merge(this.goodsList, [item])
										this.handleAddCar(item)
										this.goodsName = ''
									}else{
										this.showLevitation = true
										this.levitation = data
									}
								}else{
									this.showLevitation = false
									this.levitation = []
									this.toast = '暂无此商品，请重新搜索!'
									this.showToast = true
									this.layer = true
									let times = setTimeout(() => {
										this.showToast = false
										this.layer = false
										this.goodsName = ''
										clearTimeout(times)
									}, 2000)
								}
							}
						}, function(res) {
						 console.log(res.status);
						});
					},
					// 支付方式
					getPay() {
						this.$http.post('../../ajax/getpay',
								JSON.stringify({}), {
									headers: {
										'Content-Type': 'application/json;charset=UTF-8'
									}
								})
							.then(function(res) {
								const code = res.data.code
								if (code == 1) {
									let data = res.data.data
									this.payWayList = data
									this.payWayName = data[0].name
									this.payType = data[0].code
								}
							});
					},
					// 会员登录
					loginuser(){
						this.$http.post('../../ajax/loginuser', {
							mobile: this.mobile
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
						 if (code == 1) {
								let data = res.data.data
								this.isLogin = true
								this.userInfo = data
								this.userId = this.userInfo.id
								this.queryDiscount() // 获取优惠
							}
						}, function(res) {
						 console.log(res.status);
						});
					},
					/* 事件操作 */
					// 关闭支付成功弹窗
					handleCancelSuccess(){
						this.showSuccess = false
						this.layer = false
					},
					vailPhone(number) {
						let flag = true;
						let myreg =
							/^(((13[0-9]{1})|(14[0-9]{1})|(166)|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/;
						if (number.length !== 11 || !myreg.test(number)) {
							flag = false;
						}
						return flag;
					},
					// 更新金额与数量
					updateGoodsList(newValue) {
						if (JSON.stringify(newValue) !== '[]') {
							let total = 0
							let price = 0
							newValue.forEach(item => {
								total += item.num
								price += parseFloat(item.price) * item.num
							})
							this.goodAmount = parseFloat(price.toFixed(2))
							console.log(this.goodAmount,'goodAmount')
							this.goodTotal = total
						}else{
							console.log(this.goodAmount)
							console.log(this.sumAmount,this.goodAmount)
							 this.goodAmount = 0
							 this.goodTotal = 0
						}
						this.queryDiscount()// 获取优惠
					},
					// 更新加油列表金额与数量
					updateOilNoList(newValue) {
						if (JSON.stringify(newValue) !== '[]') {
							let price = 0
							let total = 0
							newValue.forEach(item => {
								if(item.fuellingAmount){
									price += parseFloat(item.fuellingAmount)
								}	
								if(item.active){
									++total
								}
							})
							this.oilAmount = parseFloat(price.toFixed(2))
							this.oilTotal = total
						}else{
							this.oilAmount = 0
							this.oilTotal = 0
						}
						this.queryDiscount()// 获取优惠
					},
					// 计算满减
					calculation(){
						this.sumAmount = this.goodAmount + this.oilAmount
						if(this.sumAmount > this.fullDecrement){
							this.paymentAmount = this.sumAmount - this.fullDecrement
						}else{
							this.paymentAmount = 0
						}
					},
					//加入购物车
					merge(target, source) {
						const targetIds = target.reduce((res, v) => res.add(v.id), new Set());
						const sourceIds = source.reduce((res, v) => res.add(v.id), new Set());
						target.forEach(v => sourceIds.has(v.id) && v.num++)
						return target.push(...source.filter(v => !targetIds.has(v.id)))
					},
					// 选中商品列表
					handleLevitation(item) {
						this.goodsName = ''
						this.$set(item, 'num', 0)
						this.showLevitation = false
						this.merge(this.goodsList, [item])
						this.handleAddCar(item)
						console.log(item)
					},
					// 购物车商品减
					handleReduceCar(item) {
						if (item.num > 0) {
							--item.num
							this.setCart(item.id, 2, "")
						}
					},
					// 购物车商品加
					handleAddCar(item) {
						++item.num
						this.setCart(item.id, 1, "")
					},
					// 购物车删除
					handleDelCar(item) {
						this.goodsList = this.goodsList.filter(ele => {
							return item.id != ele.id
						})
						this.setCart(item.id, 3, "")
					},
					// 搜索商品
					handleGoods() {
						if(this.goodsName !== ''){
							this.getGoodsList()
						}
					},
					// 方法
					checkNum(e) {
						let val = e.target.value.replace(/(^\s*)|(\s*$)/g, "")
						console.log(val);
						if (!val) {
							this.amountNum = '';
							return
						}
						var reg = /[^\d.]/g

						// 只能是数字和小数点，不能是其他输入
						val = val.replace(reg, "")
						// // 保证第一位只能是数字，不能是点
						val = val.replace(/^\./g, "");
						// // 小数只能出现1位
						val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
						// // 小数点后面保留2位
						val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
						console.log(val);
						this.$nextTick(() => {
							this.amountNum = val;
							if(this.categoryName == '元'){
								this.fuellingAmount = this.amountNum
								this.fuellingVolume = this.amountNum / this.popupAmountList.price
							}else{
								this.fuellingVolume = this.amountNum
								this.fuellingAmount = this.amountNum * this.popupAmountList.price
							}
						})
					},
					// 重置油表数据
					handleResetOil(){
					  this.active = 0
					  this.oilNoList = []
					  this.gasId = '' //油号id
					  this.gasGunId = '' //油枪id
					  this.storageOilNoList.forEach(item=>{
						 item.fuellingAmount = 0
						 item.fuellingVolume = 0
						 item.active = false
					  })
					  this.oilNoList = this.storageOilNoList
					},
					// 切换油列表
					handleTabs(item, index) {
						this.active = index
						this.oilNoList = []
						console.log(item.id, index)
						if (index == 0 && item.id == 0) {
							this.oilNoList = this.storageOilNoList
						} else {
							this.storageOilNoList.forEach(element => {
								if (element.subscriptId == item.id) {
									this.oilNoList.push(element)
								}
							})
						}
						console.log("调用输出", this.oilNoList, index);
					},
					// 切换支付
					handleSelectPayment(item, index) {
						this.paymentActive = index
						this.payWayName = item.name
						this.payType = item.code
					},
					// 选中金额或者容量
					handleOption(item, index) {
						this.amountActive = index
						this.amountNum = item.value
						console.log(item, 'item')
						switch (item.type) {
							case '1':
								this.fuellingAmount = this.amountNum
								this.fuellingVolume = this.amountNum / this.popupAmountList.price
								break;
							case '2':
								this.fuellingVolume = this.amountNum
								this.fuellingAmount = this.amountNum * this.popupAmountList.price
								break;
						}
					},
					// 打开优惠券
					handleCouponOpen() {
						this.showPopupCoupon = true
						this.layer = true
					},
					// 关闭优惠券
					handleCouponClose() {
						this.showPopupCoupon = false
						this.layer = false
					},
					// 选中优惠券
					handleCouponSure() {
						this.showPopupCoupon = false
						this.layer = false
					},
					// 打开登录会员
					handleLoginOpen() {
						this.showPopupLogin = true
						this.layer = true
					},
					//关闭登录会员
					handleLoginClose() {
						this.showPopupLogin = false
						this.layer = false
					},
					//确认登录会员
					handleLoginSure() {
						if(this.vailPhone(this.mobile)){
							this.showPopupLogin = false
							this.layer = false
							this.loginuser()
						}else{
							this.toast = '请输入正确手机号'
							this.showToast = true
							let times = setTimeout(() => {
								this.showToast = false
								clearTimeout(times)
							}, 2000)
						}
					},
					// 打开弹窗
					handleAmountOpen(item, index) {
						this.amountActive = ''
						this.amountNum = ''
						this.popupAmountList = item
						this.showPopupAmount = true
						this.layer = true
					},
					// 关闭弹窗
					handleAmountClose() {
						this.showPopupAmount = false
						this.layer = false
					},
					// 删除选中油号
					handleAmountDelete(item){
						this.gasId = '' //油号id
						this.gasGunId = '' //油枪id
						console.log(item,'删除')
						this.oilNoList.forEach(ele=>{
							if(ele.id == item.id){
								item.fuellingAmount = 0
								item.fuellingVolume = 0
								item.active = false
							}
						})
						this.updateOilNoList(this.oilNoList)
						this.storageOilNoList.forEach(ele=>{
							if(ele.id == item.id){
								item.fuellingAmount = 0
								item.fuellingVolume = 0
								item.active = false
							}
						})
					},
					// 打开支付弹窗
					handlePaymentOpen(){
						if(this.oilAmount > 0 || this.goodAmount>0){
							if(this.payType == 'marchant_scan'){
								this.showPopupPayment = true
								this.layer = true
							}else{
								this.queryPayment()
							}
							
						}else{
							this.toast = '请添先加商品或者油品后支付!'
							this.showToast = true
							let times = setTimeout(() => {
								this.showToast = false
								clearTimeout(times)
							}, 2000)
						}
					},
					// 关闭支付弹窗
					handlePaymentClose(){
						this.showPopupPayment = false
						this.layer = false
					},
					// 确认支付
					handlePaymentSure(){
						if(this.authcode){
							this.queryPayment()
							this.showPopupPayment = false
							this.layer = false
						}
					},
					// 确定选择
					handleAmountSure() {
						if (parseFloat(this.amountNum) > 0) {
							this.handleResetOil()// 重置油表数据
							this.oilNoList.forEach(item => {
								if (this.popupAmountList.id == item.id) {
									console.log(item,'handleAmountSure')
									item.fuellingAmount = this.fuellingAmount
									item.fuellingVolume = this.fuellingVolume
									this.gasId = item.gas_id //油号id
									this.gasGunId = item.id //油枪id
									item.active = true
								}
							})
							this.storageOilNoList.forEach(item => {
								if (this.popupAmountList.id == item.id) {
									item.fuellingAmount = this.fuellingAmount
									item.fuellingVolume = this.fuellingVolume
									item.active = true
								}
							})
							this.showPopupAmount = false
							this.updateOilNoList(this.oilNoList)
							this.layer = false
						} else {
							this.toast = '请输入正确的加油金额'
							this.showToast = true
							let times = setTimeout(() => {
								this.showToast = false
								clearTimeout(times)
							}, 2000)
						}

					},
					// 切换加油类型
					handleCategory(item) {
						console.log(event, item.name)
						this.categoryName = item.name
						switch (item.name) {
							case '元':
								this.optionList = this.amountList
								this.fuellingAmount = this.amountNum
								this.fuellingVolume = this.amountNum / this.popupAmountList.price
								break;
							case 'L':
								this.optionList = this.capacityList
								this.fuellingVolume = this.amountNum
								this.fuellingAmount = this.amountNum * this.popupAmountList.price
								break;
						}
						this.showCategory = false
					},
					// 选中优惠券
					handleSlectCoupon(item, index) {
						this.couponActive = index
					},
					// 挂单
					handleLodge(){
						this.showPopupLodge = true;
						this.layer = true
						this.stationlist()
					},
					// 关闭挂单
					handleLodgeClose(){
						this.showPopupLodge = false;
						this.layer = false
						this.staId = ''
					},
					// 作废挂单
					handleLodgeDelete(){
						this.$http.post('../../ajax/getstation', {
							sta_id: this.staId,
							type:2
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
							if (code == 1) {
								let data = res.data.data
								this.showPopupLodge = false;
								this.layer = false
								this.staId = ''
								this.stationlist()// 挂单列表
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 取挂单
					handleLodgeSure(){
						this.$http.post('../../ajax/getstation', {
							sta_id: this.staId,
							type:1
						}, {
							emulateJSON: true
						}).then(function(res) {
							const code = res.data.code
							if (code == 1) {
								let goods = res.data.data
								this.showPopupLodge = false;
								this.layer = false
								goods.forEach(item=>{
									this.$set(item, 'goods_name', item.name)
									this.$set(item, 'id', item.goods_id)
								})
								console.log(goods,'goods')
								this.goodsList = goods
								this.stationlist()// 挂单列表
							}
						}, function(res) {
							console.log(res.status);
						});
					},
					// 支付
					handlePayment(){
						if(this.oilAmount > 0 || this.goodAmount>0){
							this.queryPayment()
						}else{
							this.toast = '请添先加商品或者油品后支付!'
							this.showToast = true
							let times = setTimeout(() => {
								this.showToast = false
								clearTimeout(times)
							}, 2000)
						}
					},
					// 切换挂单列表
					handelMenu(id,index){
						this.menuActive = index
						console.log(id,'id',index)
						this.lodgeList = []
						this.historyLodgeList.forEach(item=>{
							if(item.id == id){
								console.log(item,'item')
								this.lodgeList.push(item)
								this.staId = item.id
								console.log(this.lodgeList,'lodgeList')
							}
						})
					},
					// 打开选择分类
					handleCategoryOpen(){
						this.showCategory = true
					},
					// 取消支付
					handleCancelPayment(){
						clearInterval(this.paymentTimes)
						this.goodAmount = 0
						this.oilAmount = 0
						this.goodsList = []
						this.goodTotal = 0
						this.authcode = ''
						this.paymentAmount = 0
						this.showPopupPay = false
						this.layer = false
						this.handleResetOil() // 重置油表数据
					}
				},
			})
		</script>
		<style type="text/css">
			.toast {
				position: fixed;
				left: 50%;
				top: 50%;
				background: rgba(0, 0, 0, .75);
				padding: 10px;
				border-radius: 5px;
				transform: translate(-50%, -50%);
				color: #fff;
				z-index: 20;
				font-size: 30px;
				padding: 20px;
			}

			.home {
				display: flex;
				justify-content: space-between;
				width: ;
			}

			/* 左边 */
			.home-left {
				padding: 10px 10px 0 10px;
				background-color: #fff;
				border-radius: 10px;
				width: 33%;
			    height: calc(100vh - 10px);
			    display: flex;
			    flex-direction: column;	
			}

			.home-left .tabs {
				display: flex;
				align-items: center;
			}

			.home-left .tabs .item {
				font-size: 18px;
				color: #303133;
				width: 60px;
				text-align: center;
				height: 42px;
				line-height: 42px;
				cursor: pointer;
			}

			.home-left .tabs .item.active {
				color: #409eff;
			}

			.home-left .group {
				display: flex;
				flex-wrap: wrap;
				height: 635px;
				overflow: auto;
				align-content: baseline;
			}

			.home-left .group .item {
				border-radius: 5px;
				margin-bottom: 10px;
				cursor: pointer;
				position: relative;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				width: 30%;
				background: rgba(70, 204, 3, .1);

			}

			.home-left .group .item.active {
				background-color: #13ce66;
			}

			.home-left .group .item:nth-child(3n+2) {
				margin: 0 10px 10px 10px;
			}

			.home-left .group .item .title {
				font-size: 14px;
				color: #2c3e50;
				position: absolute;
				left: 10px;
				top: 10px;
			}

			.home-left .group .item.active .title {
				color: #fff;
			}

			.home-left .group .item .name {
				height: 110px;
				line-height: 110px;
				text-align: center;
				font-size: 20px;
			}

			.home-left .group .item.active .name {
				color: #fff;
			}

			.home-left .group .item .under {
				position: absolute;
				left: 10px;
				bottom: 5px;
				display: flex;
			}

			.home-left .group .item .under .icon {
				background-image: url("/static/images/icon-7.png");
				width: 20px;
				height: 20px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.home-left .group .item.active .under .icon {
				background-image: url("/static/images/icon-6.png");
			}

			.home-left .group .item .under .price {
				font-size: 16px;
				color: #fff;
			}

			.home-left .group .item .delete {
				background-image: url("/static/images/icon-8.png");
				width: 20px;
				height: 20px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: absolute;
				right: 10px;
				bottom: 5px;
			}

			.home-left .group .item .amount {
				font-size: 16px;
				color: #fff;
				position: absolute;
				right: 10px;
				top: 10px;
			}
			.home-left .root{
				position: ;
			}
			
			.home-left .base {
				margin: 30px 0 20px 0;
			}

			.home-left .base .count-warp {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.home-left .base .count-warp .left {
				font-size: 16px;
				color: #2c3e50;
				display: flex;
				align-items: center;
			}

			.home-left .base .count-warp .right {
				font-size: 16px;
				color: #2c3e50;
				display: flex;
				align-items: center;
				padding-right: 15px;
			}

			.home-left .base .count-warp .num {
				font-weight: 700;
				color: #5393ff;
			}

			.home-left .reset {
				font-size: 17px;
				line-height: 1.8;
				border-radius: 50px;
				padding: 10px 30px;
				cursor: pointer;
				background: #fff;
				border: 1px solid #dcdfe6;
				border-color: #dcdfe6;
				width: 100px;
			}

			/* 左边 */
			/* 中间 */
			.home-center {
				padding: 10px 10px 0 10px;
				background-color: #fff;
				border-radius: 10px;
				width: 32%;
				position: relative;
			    height: calc(100vh - 10px);
			    display: flex;
			    flex-direction: column;	
			}

			.home-center .goods-title {
				font-size: 18px;
				width: 100%;
				padding-bottom: 20px;
				border-bottom: 1px solid #ececec;
				color: #2c3e50;
			}

			.home-center .goods-input {
				height: 50px;
				line-height: 50px;
				border-radius: 50px;
				font-size: 20px;
				text-align: center;
				background-color: #f8f8f8;
				border: none;
				border-style: none;
				outline: none;
				width: 100%;
				margin: 20px 0;
			}

			.levitation-option {
				position: absolute;
				background-color: #f8f8f8;
				width: 95%;
				top: 135px;
				max-height: 200px;
				border-radius: 5px;
				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			}

			.levitation-option .title {
				font-size: 14px;
				color: #000;
				height: 45px;
				line-height: 45px;
				padding: 0 10px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.levitation-option .title .name {
				width: 80%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.table .td-title {
				background-color: #ededed;
				width: 100%;
				padding: 15px 0;
				font-size: 16px;
				border-radius: 6px 6px 0 0;
				display: flex;
				align-items: center;
			}

			.table .td-title .grey {
				color: #2c3e50;
				font-size: 16px;
				width: 100px;
				padding-left: 10px;
			}

			.table .td-title .name {
				width: 180px;
			}

			.table .td-title .quantity {
				width: 120px;
			}

			.table .td-title .operation {
				text-align: center;
			}

			.table .list {
				height: calc(100vh - 320px);
				overflow: auto;
			}

			.table .list .item {
				display: flex;
				align-items: center;
				padding: 10px 0;
			}

			.table .list .item .grey {
				color: #2c3e50;
				font-size: 16px;
				width: 100px;
				padding-left: 10px;
			}

			.table .list .item .name {
				width: 180px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.table .list .item .quantity {
				display: flex;
				align-items: center;
				width: 120px;
			}

			.table .list .item .reduce {
				color: #555;
				font-size: 24px;
				cursor: pointer;
			}

			.table .list .item .add {
				color: #000;
				font-size: 24px;
				cursor: pointer;
			}

			.table .list .item .reduce,
			.table .list .item .add {
				border-radius: 50%;
				border: 1px solid #dcdfe6;
				text-align: center;
				width: 25px;
				height: 25px;
				line-height: 25px;
				cursor: pointer;
			}

			.table .list .item .quantity-number {
				outline: none;
				border-radius: 10px;
				width: 60px;
				border: 1px solid #f5f5f5;
				text-align: center;
			}

			.table .list .item .del .icon {
				border-radius: 50%;
				border: 1px solid #dcdfe6;
				text-align: center;
				width: 25px;
				height: 25px;
				line-height: 25px;
				margin: auto;
				cursor: pointer;
			}

			.home-center .base {
				margin-bottom: 10px;
			}

			.home-center .base .count-warp {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.home-center .base .count-warp .left {
				font-size: 16px;
				color: #2c3e50;
				display: flex;
				align-items: center;
			}

			.home-center .base .count-warp .right {
				font-size: 16px;
				color: #2c3e50;
				display: flex;
				align-items: center;
			}

			.home-center .base .count-warp .num {
				font-weight: 700;
				color: #5393ff;
			}

			.home-center .btns {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.home-center .btns .left .clear {
				font-size: 17px;
				line-height: 1.8;
				border-radius: 50px;
				padding: 10px 30px;
				cursor: pointer;
				background: #fff;
				border: 1px solid #dcdfe6;
				border-color: #dcdfe6;
				width: 100px;
			}

			.home-center .btns .right {
				display: flex;
				align-items: center;
			}
			.home-center .btns .right .green{
				margin-right: 30px;
				position: relative;
			}
			.home-center .btns .right .green .name{
				color: #fff;
				background-color: #13ce66;
				border-color: #13ce66;
				font-size: 17px;
				line-height: 1.8;
				border-radius: 50px;
				padding: 10px 30px;
				cursor: pointer;
				width: 100px;
			}
			
			.home-center .btns .right .green .num{
			    position: absolute;
			    top: -5px;
			    right: -5px;
			    background-color: red;
			    width: 20px;
			    height: 20px;
			    text-align: center;
			    line-height: 20px;
			    font-size: 14px;
			    color: #fff;
			    border-radius: 50%;
			}
			.home-center .btns .right .blue {
				color: #fff;
				background-color: #409eff;
				border-color: #409eff;
				font-size: 17px;
				line-height: 1.8;
				border-radius: 50px;
				padding: 10px 30px;
				cursor: pointer;
				width: 100px;
			}

			/* 中间 */
			/* 右边 */
			.home-right {
				padding: 10px 10px 0 10px;
				background-color: #fff;
				border-radius: 10px;
				width: 33%;
				height: calc(100vh - 10px);
				display: flex;
				flex-direction: column;
			}

			.home-right .home-title {
				width: 100%;
				background-color: #5393ff;
				color: #fff;
				height: 70px;
				text-align: center;
				line-height: 70px;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}
			.home-right .home-title .name{
				font-size: 18px;
			}
			.home-right .home-title .btn {
				padding: 8px 20px;
				font-size: 18px;
				display: initial;
				border: 1px solid #fff;
				border-radius: 30px;
				cursor: pointer;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
			}

			.home-right .group .goods {
				display: flex;
				align-items: center;
				padding: 10px 0px;
			}

			.home-right .group .goods .item {
				color: rgb(44, 62, 80);
				font-size: 16px;
				width: 33.33%;
				text-align: center;
			}

			.home-right .group .goods .item:nth-child(3n+2) {
				border-right: 1px solid rgb(210, 219, 223);
				border-left: 1px solid rgb(210, 219, 223);
			}

			.home-right .list {
				padding: 0px 20px 20px 20px;
				height: calc(100vh - 340px);
			}

			.home-right .list .discount {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ececec;
				padding: 5px 0;
			}

			.home-right .list .discount .label {
				color: #2c3e50;
				font-size: 16px;
			}

			.home-right .list .discount .price .num {
				color: red;
				font-size: 16px;
			}

			.home-right .list .discount .price .tips {
				color: #999;
				font-size: 14px;
			}

			.home-right .list .amount {
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #ececec;
				padding: 5px 0;
			}

			.home-right .list .amount .label {
				color: #2c3e50;
				font-size: 16px;
			}

			.home-right .list .amount .price {
				cursor: pointer;
				font-size: 18px;
				font-weight: 700;
				color: #5393ff;
			}

			.payment-list {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				background: #f1f4f6;
				padding: 0 0 10px 10px;
			}

			.payment-list .item {
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				border-radius: 8px;
				display: flex;
				align-items: center;
				background-color: #fff;
				height: 80px;
				width: 30.5%;
				font-size: 16px;
				margin-top: 10px;
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				border: 1px solid #fff;
			}

			.payment-list .item:nth-child(3n+2) {
				margin: 10px 10px 0 10px;
			}

			.payment-list .item.active {
				border-color: #5393ff !important;
				position: relative;
				overflow: hidden;
			}

			.payment-list .item.active:before {
				position: absolute;
				-webkit-font-smoothing: antialiased;
				-moz-osx-font-smoothing: grayscale;
				content: "";
				top: 0;
				right: 0;
				color: #fff;
				z-index: 10;
				background-image: url("/static/images/icon-9.png");
				background-repeat: no-repeat;
				background-size: 100% 100%;
				width: 20px;
				height: 20px;
			}

			.payment-list .item.active:after {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				display: block;
				width: 0;
				border-color: transparent #5393ff;
				border-style: solid;
				border-width: 0 40px 40px 0;
				content: "";
			}

			.payment-list .item .logo {
				width: 30px;
				height: 30px;
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}

			.payment-list .item .name {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: 16px;
				padding-left: 5px;
			}

			.home-right .below {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.home-right .below .left {
				padding-left: 10px;
			}

			.home-right .below .left .price {
				display: flex;
				align-items: baseline;
			}

			.home-right .below .left .price .rmb {
				font-size: 20px;
				font-weight: 700;
				white-space: pre;
			}

			.home-right .below .left .price .num {
				font-size: 35px;
				font-weight: 700;
				white-space: pre;
			}

			.home-right .below .left .tips {
				color: red;
				margin-top: 10px;
				font-size: 16px;
			}

			.home-right .below .right .submit {
				color: #fff;
				font-weight: bold;
				background-color: #13ce66;
				border-color: #13ce66;
				border-radius: 50px;
				padding: 10px 30px;
				font-size: 26px;
				width: 200px;
				text-align: center;
				cursor: pointer;
			}

			/* 右边 */
			/* 加油金额弹窗 */
			.popup-amount {
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: #fff;
				width: 460px;
				z-index: 10;
				border-radius: 10px;
			}
			.popup-payment{
				position: fixed;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: #fff;
				width: 400px;
				z-index: 10;
				border-radius: 10px;
			}
			.popup-payment .title {
				font-size: 30px;
				text-align: center;
				line-height: 100px;
				height: 100px;
			}
			.popup-payment .cancel{
				color: #fff;
				background-color: #5393ff;
				border-radius: 10px;
				width: 150px;
				height: 50px;
				line-height: 50px;
				text-align: center;
				margin: 0 auto 20px;
				font-size: 20px;
			}
			.max-popup{
				width: 800px;
			}
			.popup-amount .title {
				height: 54px;
				line-height: 54px;
				color: #fff;
				font-size: 18px;
				text-align: center;
				background-color: #5393ff;
				border-top-left-radius: 10px;
				border-top-right-radius: 10px;
			}

			.popup-amount .close {
				position: absolute;
				right: 18px;
				top: 8px;
				font-size: 28px;
				color: #fff;
				cursor: pointer;
				opacity: 1;
				font-weight: normal;
			}

			.popup-amount .list {
				padding-top: 10px;
			}

			.popup-amount .item {
				padding: 10px 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.popup-amount .item .label {
				color: #606266;
				font-size: 16px;
			}

			.popup-amount .item .num {
				font-weight: bold;
				color: #5393ff;
				font-weight: 700;
				font-size: 16px;
			}

			.popup-amount .item.grease {
				border: 1px solid #ccc;
				width: 90%;
				margin: auto;
				padding: 0;
				border-radius: 5px;
			}

			.popup-amount .item .input {
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				text-align: center;
				color: #5393ff;
				font-weight: 700;
				border: none;
				border-style: none;
				outline: none;
				width: 350px;
			}

			.popup-amount .item.grease .select {
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
				height: 50px;
				line-height: 50px;
				border: none;
				border-left: 1px solid #ccc;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 5px;
				outline: none;
				text-align-last: center;
				width: 55px;
				position: relative;
			}

			.popup-amount .item.grease .select .option {
				text-align: center;
				cursor: pointer;
			}
			.popup-amount .item.grease .select .category{
			    position: absolute;
			    bottom: -102px;
			    left: 0;
			    z-index: 10;
			    width: 100%;
			    background: #fff;
			    border: 1px solid #ccc;
			    border-bottom-right-radius: 5px;
			    border-bottom-left-radius: 5px;
			}
			.popup-amount .total-amount .ele {
				width: 20%;
				height: 45px;
				line-height: 45px;
				text-align: center;
				background-color: #eee;
				border-radius: 5px;
				font-size: 16px;
				cursor: pointer;
			}

			.popup-amount .total-amount .ele.active {
				background-color: #5393ff;
				color: #fff;
			}

			.popup-amount .btns {
				justify-content: space-around;
			}

			.popup-amount .btns .clear {
				font-size: 17px;
				line-height: 1.8;
				border-radius: 50px;
				padding: 5px 30px;
				cursor: pointer;
				background: #fff;
				border: 1px solid #dcdfe6;
				border-color: #dcdfe6;
				color: #606266;
			}

			.popup-amount .btns .sure {
				font-size: 17px;
				line-height: 1.8;
				border-radius: 50px;
				padding: 5px 30px;
				color: #fff;
				background-color: #409eff;
				border-color: #409eff;
				cursor: pointer;
			}

			.popup-amount .coupon {
				max-height: 300px;
				overflow-y: auto;
				min-height: 200px;
			}

			.popup-amount .coupon .item {
				border-bottom: 1px solid #ececec;
			}

			.popup-amount .coupon .active {
				background: #46cc03;
				border-radius: 5px;

			}

			.popup-amount .coupon .active .label,
			.popup-amount .coupon .active .num {
				color: #fff;
			}

			.popup-amount .coupon .num {
				color: red;
			}
			.popup-amount .content{
				display: flex;
				padding: 0;
				border-bottom: 1px solid #f5f5f5;
			}
			.popup-amount .content .menu{
				width: 150px;
				border-right: 1px solid #f5f5f5;
				height: 400px;
				overflow: auto;
			}
			.popup-amount .content .menu .name{
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-bottom: 1px solid #ededed;
				cursor: pointer;
			}
			.popup-amount .content .menu .name.active{
				background-color: #5393ff;
				color:#fff;
			}
			.popup-amount .content .menu .label{
				background-color: #ededed;
				color: #909399;
				font-weight: 500;
				font-size: 14px;
				display: block;
				height: 30px;
				line-height: 30px;
			}
			.popup-amount .content .group{
				width: 650px;
			}
			.popup-amount .content .group .element{
				height: 400px;
				overflow: auto;
			}
			.popup-amount .content .group .ele{
				height: 50px;
				line-height: 50px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1px solid #f5f5f5;
			}
			.popup-amount .content .group-title{
				background-color: #ededed;
				color: #909399;
				font-weight: 500;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
			.popup-amount .content .group-title .name,.popup-amount .content .ele .name{
				height: 30px;
				line-height: 30px;
				text-align: center;
				width: 200px;
			}
			.popup-amount .content .ele .name{
			    width: 200px;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: nowrap;
			    text-align: center;	
			}
			.layer {
				position: fixed;
				top: 0;
				left: 0;
				background: #000;
				opacity: .2;
				width: 100%;
				height: 100%;
			}
			.scroll-bar::-webkit-scrollbar {
			  /*滚动条整体样式*/
			  /*高宽分别对应横竖滚动条的尺寸*/
			  width: 6px;
			  height: 1px;
			}
			.scroll-bar::-webkit-scrollbar-thumb {
			    /*滚动条里面小方块*/
			    border-radius: 10px;
			    background: #ccc;
			}
			.scroll-bar::-webkit-scrollbar-track {
			    /*滚动条里面轨道*/
			    border-radius: 10px;
			    background: #fff;
			  }
			@media screen and (max-width: 1024px) {
				.home-left .tabs .item {
					font-size: 14px;
				}
			   .home-left .group .item .name {
			       height: 90px;
			       line-height: 90px;
			       text-align: center;
			       font-size: 14px;
			   }
			   .home-center .goods-input {
					height: 40px;
			        line-height: 40px;
			        border-radius: 50px;
			        font-size: 12px;
			        text-align: center;
			        background-color: #f8f8f8;
			        border: none;
			        border-style: none;
			        outline: none;
			        width: 100%;
			        margin: 10px 0;
			   }
			   .levitation-option{
				    top: 110px;
			   }
			   .table .td-title .grey,.table .td-title,.home-left .group .item .title{
				   font-size: 12px;
			   }
			   .home-left .base {
			       margin: 15px 0 10px 0;
			   }
			   .home-left .group {
				   height: 405px;
			   }
			   .home-left .reset,.home-center .btns .left .clear {
			       font-size: 14px;
			       border-radius: 50px;
			       padding: 5px 0px;
			       cursor: pointer;
			       background: #fff;
			       border: 1px solid #dcdfe6;
			       border-color: #dcdfe6;
			       width: 70px;
			       text-align: center;
			   }
			   .home-center .btns .right .green .name {
			       color: #fff;
			       background-color: #13ce66;
			       border-color: #13ce66;
			       font-size: 14px;
			       border-radius: 50px;
			       padding: 5px 0px;
			       cursor: pointer;
			       width: 70px;
				   text-align: center;
			   }
			   .home-center .btns .right .blue {
			       color: #fff;
			       background-color: #409eff;
			       border-color: #409eff;
			       font-size: 14px;
			       border-radius: 50px;
			       padding: 5px 0px;
			       cursor: pointer;
			       width: 70px;
				   text-align: center;
			   }
			   .table .list {
				   height: calc(100vh - 265px);
			   }
			   .home-center .goods-title {
				   font-size: 14px;
			   }
			   .home-right .home-title {
					height: 50px;
				    line-height: 50px;   
			   }
			   .home-right .home-title .btn{
					padding: 4px 10px;
				    font-size: 14px;   
			   }
			   .home-right .group .goods .item,.home-right .list .discount .price .tips,.payment-list .item .name {
				    font-size: 12px;
			   }
			   .home-right .list .discount .label,.home-right .list .discount .price .num,.home-right .list .amount .price,.home-right .list .amount .label{
				   font-size: 14px;
			   }
			   .home-right .below .right .submit {
				   padding: 5px 0;
				   font-size: 20px;
				   width: 120px;
			   }
			   .home-right .below .left .price .rmb {
				    font-size: 20px;
			   }
			   .home-right .below .left .price .num {
				   font-size: 28px;
			   }
			   .home-right .below .left .tips {
					margin-top: 0px;
				    font-size: 14px;
			   }
			   .payment-list {
				   padding: 0 0 5px 5px;
			   }
			   .payment-list .item .logo {
				    width: 20px;
				    height: 20px;
			   }
			   .home-right .list {
				   padding: 0px 10px 10px 10px;
				   height: calc(100vh - 290px);
			   }
			   .popup-amount .item .input,.popup-amount .item .label,.popup-amount .total-amount .ele,.popup-amount .btns .clear {
				  font-size: 14px;  
			   }
			   .content {
				  padding: 5px;
				  padding-left: 5px;
				  padding-right: 5px;
			   }
			   .payment-list .item .name {
				   width: 50px;
				   -webkit-line-clamp: 1;  
			   }
			   .home-right {
				   padding: 5px 5px 0 5px;
			   }
			   .home-center .btns .right .green {
				  margin-right: 10px;
			   }
			   .home-left .group .item .amount,.home-left .group .item .under .price {
				   font-size: 12px;
			   }
			   .home-left .group .item .under .icon,.home-left .group .item .delete {
				    width: 15px;
				    height: 15px;
			   }
			   .home-left .group .item .delete {
				   bottom: 8px;
			   }
			} 
		</style>
	</body>
</html>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="/assets/js/require<?php echo \think\Config::get('app_debug')?'':'.min'; ?>.js" data-main="/assets/js/require-backend<?php echo \think\Config::get('app_debug')?'':'.min'; ?>.js?v=<?php echo htmlentities($site['version']); ?>"></script>
    </body>
</html>
